<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label=" " class="width100 box-align-center">
            <div class="nav cp" :class="{active:active == index}" @click="handleChange(index)"
                v-for="(item,index) in navList" :key="index">{{item}}</div>
        </el-form-item>
        <div v-show="isShow == true">
            <el-form-item label=" " prop="userCode">
                <div class="input-wrapper">
                    <input type="text" v-model="ruleForm.userCode" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">手机号或账号</label>
                </div>
            </el-form-item>
            <el-form-item label=" " prop="password" class="item">
                <div class="input-wrapper">
                    <input type="password" v-model="ruleForm.password" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">密码</label>
                </div>
            </el-form-item>
        </div>
        <div v-show="isShow == false">
            <el-form-item label=" ">
                <div class="input-wrapper">
                    <input type="text" v-model="ruleForm.phone" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">手机号</label>
                </div>
            </el-form-item>
            <el-form-item label=" ">
                <div class="input-wrapper input-width">
                    <input type="text" v-model="ruleForm.code" class="text-input text" placeholder=" "
                        autocomplete="off">
                    <label class="input-label">验证码</label>
                    <el-button type="default" v-if="able==false" class="posa3" @click="sendCode('ruleForm')">
                        {{sendcodetext}}
                    </el-button>
                    <el-button type="default" v-else class="posa3">{{miao}}s</el-button>
                </div>
            </el-form-item>
        </div>

        <el-form-item label=" " class="item">
            <div class="box box-align-center box-pack-between">
                <el-checkbox v-model="checked">下次自动登录</el-checkbox>
                <el-link :underline="false" @click="handleChangePassword">忘记密码？</el-link>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" class="btn" @click="isShow == true?submitForm('ruleForm'):submitCode()">登录
            </el-button>
        </el-form-item>
        <el-form-item>
            <el-col class="tc" style="color: rgb(173, 173, 173);">登录即代表同意《用户协议》 《隐私政策》</el-col>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            var validateCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'));
                } else if (value !== this.authcode) {
                    console.log(value);
                    callback(new Error('验证码错误'));
                } else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (value === '') {
                    callback(new Error('请输入手机号'));
                } else if (!myreg.test(value) || value.length != 11) {
                    callback(new Error('手机号格式错误'));
                } else {
                    callback();
                }
            };
            return {
                user: this.$store.state.user,
                loginVisible: false,
                ruleForm: {
                    userCode: '',
                    password: '',
                    phone: '',
                    code: ''
                },
                rules: {
                    userCode: [{
                        required: true,
                        message: '手机号或账号不能为空',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }]
                },
                checked: false,
                isShow: true,
                active: 0,
                navList: ['账号登录', '验证码登录'],
                sendcodetext: '获取验证码',
                miao: 60,
                able: false,
                timer: null,
                showlogin: false,
                authcode: '',
            }
        },
        mounted() {},
        methods: {
            handleChange(i) {
                this.active = i;
                if (i != 0) {
                    this.isShow = false
                } else {
                    this.isShow = true
                }

            },
            submitForm(formName) {
                console.log(this.isShow)
                if (this.isShow = true) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let url = '/login';
                            let params = {
                                usercode: this.ruleForm.userCode,
                                pwd: this.ruleForm.password
                            }
                            this.$ajax.post(url, params).then(res => {
                                console.log(params);
                                console.log(res);
                                if (res.result == "success") {

                                    if (this.active == 0) {
                                        this.$router.push({
                                            path: '/role',
                                            query: {
                                                usercode: this.ruleForm.userCode
                                            }
                                        });
                                    } else {
                                        this.$router.push({
                                            path: '/role',
                                            query: {
                                                usercode: this.ruleForm.phone
                                            }
                                        });
                                    }

                                } else if (res.result == 0) {
                                    this.$message.error('无此用户');
                                } else if (res.result == "none") {
                                    this.$message.error('无此用户');
                                } else if (res.result == "password_error") {
                                    this.$message.error('密码错误');
                                } else if (res.result == "fwdq") {
                                    this.$message.error('服务已到期');
                                } else {
                                    this.$message.error('无登录权限');
                                }
                            })


                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }

            },
            submitCode() {
                let url = '/loginByMobileMsg';
                let params = {
                    mobile: this.ruleForm.phone,
                    msg: this.ruleForm.code
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(params);
                    console.log(res);
                    if (res.result == "success") {

                        this.$router.push({
                            path: '/role',
                            query: {
                                usercode: this.ruleForm.phone
                            }
                        });

                    } else if (res.result == 0) {
                        this.$message.error('无此用户');
                    } else if (res.result == "none") {
                        this.$message.error('无此用户');
                    } else if (res.result == "password_error") {
                        this.$message.error('密码错误');
                    } else if (res.result == "fwdq") {
                        this.$message.error('服务已到期');
                    } else {
                        this.$message.error('无登录权限');
                    }
                })
            },
            handleChangePassword() {
                this.$emit('handleForget', true)
            },
            //验证码
            createCode() { //生成6位随机数
                var code = '';
                var codeLength = 6;
                var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
                for (var i = 0; i < codeLength; i++) {
                    var index = Math.floor(Math.random() * 9);
                    code += random[index];
                }
                return code;
            },
            //发送验证码
            sendCode(formName) {
                // console.log('验证码' + this.authcode)
                // this.authcode = this.createCode()
                // this.ruleForm.code = this.authcode

                // this.getCode()
                // return
                if (this.ruleForm.phone != '') {
                    // /loginByMobileMsg
                    let url = '/getMobileMsg';
                    this.$ajax.post(url, {
                        mobile: this.ruleForm.phone,
                        // authCode: this.authcode
                    }).then(res => {
                        if (res.code == 0) {
                            this.getCode()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.warning("手机号不能为空")
                }

            },

            //倒计时
            getCode() {
                if (!this.timer) {
                    // 通知验证码组件内部开始倒计时
                    this.miao = 60;
                    this.able = true;
                    this.timer = setInterval(() => {
                        if (this.miao > 0 && this.miao <= 60) {
                            this.miao--;
                            if (this.miao == 1) {
                                this.authcode = "";
                                this.sendcodetext = '重新发送'
                            }
                        } else {
                            clearInterval(this.timer)
                            this.able = false;
                            this.timer = null
                        }
                    }, 1000);
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    @import "style.scss";
</style>
